<template>
  <div class="rule-container">
    <div class="create-container">
      <el-button type="primary" @click="addCardRule"
        >增加停车计费规则</el-button
      >
      <el-button @click="exportExcel">导出Excel</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table :data="ruleList" style="width: 100%">
        <el-table-column label="序号" type="index" />
        <el-table-column label="计费规则编号" prop="ruleNumber" />
        <el-table-column label="计费规则名称" prop="ruleName" />
        <el-table-column label="免费时长(分钟)" prop="freeDuration" />
        <el-table-column label="收费上线(元)" prop="chargeCeiling" />
        <el-table-column label="计费方式" prop="chargeType">
          <template #default="{ row: { chargeType } }">
            {{ formatChargrType(chargeType) }}
          </template>
        </el-table-column>
        <el-table-column label="计费规则" prop="ruleNameView" />
        <el-table-column label="操作" fixed="right" width="120">
          <template #default="scope">
            <el-button
              size="mini"
              type="text"
              @click="editCardRule(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="deleteCardRule(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加规则弹框 -->
    <!-- 
    知识点：sync是父子数据双向绑定的语法糖，它代替来原来复杂的写法,可以让父组件少写一个接收子组件的值、并修改的方法 
     （组件代码比较多的时候，推荐抽取出来单个组件，再使用）
    但是注意子组件里面还是得写自定义事件来传递参数，不要直接修改props的值，无效
    eg：子组件自定义事件 this.$emit('update:showDialog', false)

    涉及父子组件的时候，记住两条线即可：（两条线处理好双向绑定就完成了）
    1.父传值给子
    2.子传值给父
     -->
    <add-rule
      ref="addRule"
      :showDialog.sync="showDialog"
      @getRuleList="getRuleList"
    ></add-rule>
  </div>
</template>

<script>
import { getRuleListAPI, deleteRuleAPI, getRuleDetailAPI } from '@/api/CardRule'
import { utils, writeFileXLSX } from 'xlsx'
import AddRule from './conpoments/AddRule.vue'

export default {
  name: 'CardRule',
  components: {
    AddRule
  },
  data () {
    return {
      ruleList: [],
      params: {
        page: 1,
        pageSize: 10
      },
      showDialog: false
    }
  },
  methods: {
    async editCardRule (id) {
      this.showDialog = true
      //知识点：在打开窗口的同时修改标题，是最好的方式，不用依赖变量去改变（因为这样子可能会出现标题更新延迟）
      this.$refs.addRule.title = '编辑规则'
      // 知识点：【父组件调用子组件】的属性和方法，可以先获取子组件的标签对象，通过该对象调用
      this.$refs.addRule.getRuleByID(id)
      // 知识点：父传子的时候，必须先把数据整理好再传递给子，不要在子组件里面直接修改prop的数据，如下若你要删除id字段，该操作要在父组件里面进行
      // delete data.id
    },
    addCardRule () {
      this.$refs.addRule.title = '新增规则'
      this.showDialog = true
    },
    deleteCardRule (id) {
      this.$confirm('确认要删除该信息吗？', '提示')
        .then(async () => {
          await deleteRuleAPI(id)
          this.$message.success('删除成功')
          this.getRuleList()
        })
        .catch(() => {})
    },
    // 知识点：前端也可以处理导出逻辑，一般数据比较少的时候可以这么做，如下使用了SheetJS 框架
    //导出
    exportExcel () {
      //按照业务要求整理需要导出的数据
      const exportHeader = [
        'ruleNumber',
        'ruleName',
        'ruleNameView',
        'chargeCeiling'
      ]
      const exportHeaderName = [
        '计费规则编号',
        '计费规则名称',
        '计费规则',
        '收费上限（元）'
      ]

      const exportItem = this.ruleList.map(item => {
        const exportItemTemp = {}
        exportHeader.forEach(key => {
          exportItemTemp[key] = item[key]
        })
        return exportItemTemp
      })

      // 创建一个新的工作簿（一个工作簿下有多个工作表sheet）
      const workbook = utils.book_new()
      // 创建一个工作表 要求一个对象数组格式 (这里是导出当前页的数据)
      const worksheet = utils.json_to_sheet(exportItem)

      // 把工作表添加到工作簿  Data为工作表名称
      utils.book_append_sheet(workbook, worksheet, '计费规则')
      // 改写表头
      utils.sheet_add_aoa(worksheet, [exportHeaderName], { origin: 'A1' })
      // 导出方法进行导出
      writeFileXLSX(workbook, '计费规则.xlsx')
    },
    formatChargrType (chargeType) {
      const typeMap = {
        duration: '时长收费',
        turn: '按次收费',
        partition: '分段收费'
      }
      return typeMap[chargeType]
    },
    // 获取规则列表
    async getRuleList () {
      const res = await getRuleListAPI(this.params)
      this.ruleList = res.data.rows
    }
  },
  created () {
    this.getRuleList()
  }
}
</script>

<style lang="scss" scoped>
.rule-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
.create-container {
  margin: 10px 0px;
}
.page-container {
  padding: 4px 0px;
  text-align: right;
}
</style>
